<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* 配色方案 */

      /* 1. 玫瑰红系 */
      .light-rose {
        --bg-primary: #fdf2f8;
        --bg-secondary: #fce7f3;
        --text-primary: #881337;
        --text-secondary: #e11d48;
        --accent-color: #be123c;
        --border-color: #fbcfe8;
      }
      .dark-rose {
        --bg-primary: #881337;
        --bg-secondary: #be123c;
        --text-primary: #fdf2f8;
        --text-secondary: #fbcfe8;
        --accent-color: #f472b6;
        --border-color: #e11d48;
      }

      /* 2. 薄荷绿系 */
      .light-mint {
        --bg-primary: #f0fdf4;
        --bg-secondary: #dcfce7;
        --text-primary: #052e16;
        --text-secondary: #16a34a;
        --accent-color: #15803d;
        --border-color: #bbf7d0;
      }
      .dark-mint {
        --bg-primary: #052e16;
        --bg-secondary: #166534;
        --text-primary: #f0fdf4;
        --text-secondary: #bbf7d0;
        --accent-color: #4ade80;
        --border-color: #16a34a;
      }

      /* 3. 天空蓝系 */
      .light-sky {
        --bg-primary: #f0f9ff;
        --bg-secondary: #e0f2fe;
        --text-primary: #0c4a6e;
        --text-secondary: #0284c7;
        --accent-color: #0369a1;
        --border-color: #bae6fd;
      }
      .dark-sky {
        --bg-primary: #0c4a6e;
        --bg-secondary: #075985;
        --text-primary: #f0f9ff;
        --text-secondary: #bae6fd;
        --accent-color: #38bdf8;
        --border-color: #0284c7;
      }

      /* 4. 琥珀色系 */
      .light-amber {
        --bg-primary: #fffbeb;
        --bg-secondary: #fef3c7;
        --text-primary: #78350f;
        --text-secondary: #d97706;
        --accent-color: #b45309;
        --border-color: #fde68a;
      }
      .dark-amber {
        --bg-primary: #78350f;
        --bg-secondary: #92400e;
        --text-primary: #fffbeb;
        --text-secondary: #fde68a;
        --accent-color: #fbbf24;
        --border-color: #d97706;
      }

      /* 5. 紫罗兰系 */
      .light-violet {
        --bg-primary: #f5f3ff;
        --bg-secondary: #ede9fe;
        --text-primary: #312e81;
        --text-secondary: #7c3aed;
        --accent-color: #6d28d9;
        --border-color: #ddd6fe;
      }
      .dark-violet {
        --bg-primary: #312e81;
        --bg-secondary: #4338ca;
        --text-primary: #f5f3ff;
        --text-secondary: #ddd6fe;
        --accent-color: #a78bfa;
        --border-color: #7c3aed;
      }

      /* 6. 粉红系 */
      .light-pink {
        --bg-primary: #fdf2f8;
        --bg-secondary: #fce7f3;
        --text-primary: #831843;
        --text-secondary: #db2777;
        --accent-color: #be185d;
        --border-color: #fbcfe8;
      }
      .dark-pink {
        --bg-primary: #831843;
        --bg-secondary: #9d174d;
        --text-primary: #fdf2f8;
        --text-secondary: #fbcfe8;
        --accent-color: #f472b6;
        --border-color: #db2777;
      }

      /* 7. 青色系 */
      .light-cyan {
        --bg-primary: #ecfeff;
        --bg-secondary: #cffafe;
        --text-primary: #083344;
        --text-secondary: #06b6d4;
        --accent-color: #0891b2;
        --border-color: #a5f3fc;
      }
      .dark-cyan {
        --bg-primary: #083344;
        --bg-secondary: #0e5d6c;
        --text-primary: #ecfeff;
        --text-secondary: #a5f3fc;
        --accent-color: #22d3ee;
        --border-color: #06b6d4;
      }

      /* 8. 石板灰系 */
      .light-slate {
        --bg-primary: #f8fafc;
        --bg-secondary: #f1f5f9;
        --text-primary: #0f172a;
        --text-secondary: #64748b;
        --accent-color: #475569;
        --border-color: #cbd5e1;
      }
      .dark-slate {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --accent-color: #94a3b8;
        --border-color: #64748b;
      }

      /* 9. 绿松石系 */
      .light-teal {
        --bg-primary: #f0fdfa;
        --bg-secondary: #ccfbf1;
        --text-primary: #042f2e;
        --text-secondary: #0d9488;
        --accent-color: #0f766e;
        --border-color: #99f6e4;
      }
      .dark-teal {
        --bg-primary: #042f2e;
        --bg-secondary: #0f514e;
        --text-primary: #f0fdfa;
        --text-secondary: #99f6e4;
        --accent-color: #2dd4bf;
        --border-color: #0d9488;
      }

      /* 10. 琥珀橙系 */
      .light-amber-orange {
        --bg-primary: #fff7ed;
        --bg-secondary: #ffedd5;
        --text-primary: #7c2d12;
        --text-secondary: #ea580c;
        --accent-color: #c2410c;
        --border-color: #fed7aa;
      }
      .dark-amber-orange {
        --bg-primary: #7c2d12;
        --bg-secondary: #9a3412;
        --text-primary: #fff7ed;
        --text-secondary: #fed7aa;
        --accent-color: #fb923c;
        --border-color: #ea580c;
      }

      .container {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        margin: 10px;
        background: var(--bg-primary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .container small {
        color: var(--text-secondary);
        padding: 10px;
        background: var(--bg-secondary);
        display: block;
        margin-top: 5px;
      }

      .container strong {
        color: var(--accent-color);
      }

      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
      }

      body {
        background-color: #f0f0f0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      .pair {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="pair">
        <div class="container light-rose">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-rose">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-mint">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-mint">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-sky">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-sky">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-amber">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-amber">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-violet">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-violet">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-pink">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-pink">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-cyan">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-cyan">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-slate">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-slate">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-teal">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-teal">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>

      <div class="pair">
        <div class="container light-amber-orange">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
        <div class="container dark-amber-orange">
          <p>文字</p>
          <p><strong>强调</strong></p>
          <small>次要文字</small>
        </div>
      </div>
    </div>
  </body>
</html>
